<template>
  <div>
    <Top />
    <div style="height: 0.46rem"></div>
    <div class="clearfix p-goodslist-filter-menu">
      <van-dropdown-menu>
        <van-dropdown-item
          v-model="value1"
          :options="option1"
          @change="sendFilter(option1, value1)"
        />
        <van-dropdown-item
          v-model="value2"
          :options="option2"
          @change="sendFilter(option2, value2)"
        />
        <van-dropdown-item title="服务器" ref="item">
          <van-tree-select
            height="260px"
            :items="items"
            :main-active-index.sync="active"
          >
            <template #content>
              <div v-if="active === 0">
                <div
                  role="button"
                  tabindex="0"
                  class="van-cell van-cell--clickable van-dropdown-item__option"
                >
                  <div class="van-cell__title"><span>全部区服</span></div>
                </div>
              </div>
              <div v-if="active === 1">
                <van-search v-model="value" placeholder="请输入搜索关键词" />
              </div>
              <div v-if="active === 2">
                <van-search v-model="value" placeholder="请输入搜索关键词" />
              </div>
              <div v-if="active === 3">
                <van-search v-model="value" placeholder="请输入搜索关键词" />
              </div>
            </template>
          </van-tree-select>
        </van-dropdown-item>
        <van-dropdown-item
          v-model="value4"
          :options="option4"
          @change="sendFilter(option4, value4)"
        />
        <van-dropdown-item title="筛选" ref="item">
          <div id="js-screening-container" style="height: 400px">
            <div class="screening-condition goodsid-rest">
              <div class="screening-condition-title">价格</div>
              <div class="priceRange">
                <div class="inputBox">
                  <input placeholder="自定最低价" v-model="fromdata.limtSum" />
                </div>
                <div class="range-line"></div>
                <div class="inputBox">
                  <input placeholder="自定最高价" v-model="fromdata.maxSum" />
                </div>
              </div>
              <ul class="screening-condition-content clearfix">
                <li
                  class="screening-condition-content-list"
                  v-for="(val, index) in sumScope"
                  :key="index"
                >
                  <p
                    class="screening-condition-content-listp js_price_value"
                    :class="[idx == index ? 'orange' : '']"
                    @click="setScope({ limit: val.limit, max: val.max, index })"
                  >
                    {{ val.text ? val.text : "" }}
                    {{ val.limit }}{{ index == 0 ? "" : "-" }}{{ val.max }}
                  </p>
                </li>
              </ul>
            </div>
            <ul class="screening-tools clearfix">
              <li class="screening-tools-li" @click="reset">重置选项</li>
              <li class="screening-tools-li" @click="enter">确定</li>
            </ul>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>

    <div class="division"></div>
    <div class="warpper" ref="warpper" v-if="scroll">
      <div class="js-p-goodslist-goodslist-container">
        <div
          class="single-item-new-tu"
          style="display: block"
          v-for="(val, index) in goodsList"
          v-show="val.name"
          :key="index"
        >
          <div @click.stop="goDetail(val.id)" class="single-item-urls-new">
            <div class="listimg">
              <img
                :src="
                  val.picurl
                    ? val.picurl[0]
                    : require('../assets/img/noimg_bb2fc02.png')
                "
                alt=""
                class="imgTemplate"
                style="width: auto; height: 100%"
              />
            </div>
            <div>
              <div class="goodsName">
                {{ val.name }}
              </div>
              <div class="clienBox">
                <div class="goodsclien">
                  <span>{{ val.clientname }}</span
                  ><span>{{ val.areaname }}</span>
                </div>
                <div class="sellmode" data-tb="1">
                  <span class="jishoubox">寄售</span
                  ><span v-if="val.insurance_type == '60'" class="toubao"
                    >已投保</span
                  >
                  <span v-else class="toubao" style="color: #ff5858"
                    >可投保</span
                  >
                </div>
              </div>
              <div class="goodsbrightened">{{ val.bright_spot }}</div>
              <div class="linebox">
                <div class="islineBox" data-s="当前在线">
                  <div class="isline current">
                    <span id="radius"></span
                    ><span>卖家{{ val.lastSellerOnline }}</span>
                  </div>
                </div>
                <div class="goodsprice">￥{{ val.price }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoods } from "../api/getGoods";
import BScroll from "@better-scroll/core";
import Pullup from "@better-scroll/pull-up";
import { getGameType } from "../api/getGameType";
import Top from "../components/top";
import qs from "qs";
import { data } from "../mock/GameDtail";

BScroll.use(Pullup);

export default {
  data() {
    return {
      ...data,
      scroll: {}
    };
  },
  created() {
    let gamesTag = JSON.parse(sessionStorage.gamesTag);
    let { goodsid, goodsparentid, value } = gamesTag;
    this.fromdata.goodsid = goodsid;
    this.value1 = value + 1;
    this.fromdata.goodsparentid = goodsparentid;
    let n = this.initial();
    this.loadData();
    getGameType(n).then(val => {
      val.data.forEach((val, i) => {
        val.text = val.goodsname;
        val.value = i + 1;
        delete val.goodsname;
      });
      val.data.unshift({
        goodsid: 1,
        goodsparentid: 20,
        text: "商品类型",
        value: 0
      });
      this.option1 = val.data;
    });
  },
  methods: {
    initial() {
      let { m, n } = this.$route.params;
      this.fromdata.spelling = m;
      this.fromdata.gameid = n;
      return n;
    },
    loadData() {
      let data = qs.stringify(this.fromdata);
      getGoods(data).then(val => {
        this.goodsList = [...this.goodsList, ...val.data.goodsList];
        this.$nextTick(() => {
          if(this.scroll.enabled){
            this.scroll.refresh()
          }else{
            
            this.scroll = new BScroll(this.$refs.warpper, {
              pullUpLoad: true,
              click: true,
              disableTouch: false
            });
            this.scroll.finishPullUp()
            this.upGoods();
          }
            
          
        });
      });
    },
    upGoods() {
      
      this.scroll.on("pullingUp", () => {
        this.fromdata.page++;
        this.loadData();
        this.scroll.finishPullUp()
      });
    },
    showPopup() {
      this.show = true;
    },
    onConfirm() {
      this.$refs.item.toggle();
    },
    setScope({ limit, max, index }) {
      this.idx = index;
      this.limtSum = limit;
      this.maxSum = max;
    },
    sendFilter(option, value) {
      option[value].goodsparentid
        ? (this.fromdata.parentgoodsid = option[value].goodsparentid)
        : "";
      option[value].goodsid
        ? (this.fromdata.goodsid = option[value].goodsid)
        : "";
      option[value].mod ? (this.fromdata.mobileid = option[value].mod) : "";
      option[value].sort ? (this.fromdata.sort = option[value].sort) : "";
      let data = qs.stringify(this.fromdata);
      getGoods(data).then(val => {
        this.goodsList = val.data.goodsList;
        this.$nextTick(() => {
          this.scroll = new BScroll(this.$refs.warpper, {
            pullUpLoad: true,
            click: true
          });
          this.scroll.refresh();
          this.upGoods();
        });
      });
    },
    reset() {
      this.idx = 0;
      this.fromdata.maxSum = null;
      this.fromdata.limtSum = null;
    },
    enter() {
      this.fromdata.minPrice = this.limtSum;
      this.fromdata.maxPrice = this.maxSum;
      let data = qs.stringify(this.fromdata);
      getGoods(data).then(val => {
        this.goodsList = val.data.goodsList;
      });
      this.onConfirm();
    },
    goDetail(id) {
      let { fromdata } = this;
      let data = JSON.stringify(fromdata);

      sessionStorage.goodData = data;
      this.$router.push(`/product/${id}`);
    }
  },

  components: {
    Top
  }
};
</script>

<style lang="less" scoped>
@import url("../assets/css/site.css");
@import url("../assets/css/gameDtaul.css");
.van-dropdown-menu__title {
  padding: 0 6px;
}
.filter-server-right-search::before {
  content: "";
  position: absolute;
  width: 0.15rem;
  height: 0.15rem;
  background: url(https://m.taoshouyou.com/static/home/static/css/gamelist/search_de71e73.png)
    no-repeat;
  left: 0.07rem;
  top: 0.09rem;
  background-size: contain;
  z-index: 999;
}
.warpper {
  height: calc(100vh - 86px);
  overflow: hidden;
}
</style>